<template>
  <div ref="print" class="box">
    <div class="heade">
      <h4>哈尔滨市公安局</h4>
      <h2>收取保证金通知书</h2>
      <span>回&nbsp;&nbsp;&nbsp;执</span>
      <p style="margin-left: 200px;font-size: 12px;">方公（经）取保字[2023]21</p>
    </div>
    <div class="cont">
      <div class="line">哈尔滨市公安局：</div>
      <p class="contu">
        根据你局通知我单位已于
        <span>2023-12-15</span> 日收取张庆文(性别
        <span>男</span> ，出生日期
        <span>2023-12-15</span>
        住址
        <span>黑龙江省方正县会发镇会发</span>)，交来的保证金大写
        <span>壹万元整</span>元并存入你局保证金专户
      </p>
      <div class="footer">
        <p>鹤岗市市尽农甜信餐苏社</p>
        <p>二零二丰年十二月十五日</p>
        <img src="https://img0.baidu.com/it/u=1505576873,3746429877&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" width="150" class="imgs" alt />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {

    };
  },
  created() {
  },
  methods: {


  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.box1 {
  margin: 0 auto;
  padding: 20px;
  width: 550px;
  height: 700px;
  border: 1px solid #000;
  .heade {
    text-align: center;

    > h4 {
      font-weight: 600;
    }

    > h2 {
      margin: 6px 0 5px 0;
      font-weight: 600;
    }
  }

  .cont {
    position: relative;
    margin-top: 30px;
    .line {
      width: 150px;
      height: 20px;
      text-align: right;
      margin-left: 30px;
      border-bottom: 1px solid #000;
    }
    .contu {
      text-indent: 24px;
      line-height: 40px;
      width: 500px;
      margin: 20px auto;
      > span {
        border-bottom: 1px solid #000;
      }
    }
    .footer {
      position: absolute;
      bottom: -150px;
      right: 30px;
      .imgs {
        border-radius: 50%;
        position: absolute;
        top: -30px;
        right: 15px;
      }
    }
  }
}
</style>
